$color-secondary: rgba(96, 139, 112, 0.7)
$color-code-background: #e7f1d8
article img
  border: 0
  max-width: 100%

#posts
  margin-top: 3rem
  margin-bottom: 3rem
  h1, h2
    font-size: 1.3rem
    margin: 1rem 0 1rem 0

  h3, h4
    font-size: 1.2rem
    margin: 1rem 0 1rem 0

  h5, h6
    font-size: 1.1rem
    margin: 1rem 0 1rem 0

  .post-date
    color: $color-secondary
    padding-bottom: .5rem

img
  max-width: 100%

#post
  margin-top: 8rem
  margin-bottom: 6rem

  kbd, pre, samp
    font-family: "Lucida Console", Consolas, "Microsoft YaHei UI", monospace, monospace
    font-size: 1em

  code
    font-family: "Lucida Console", Consolas, "Microsoft YaHei UI", monospace, monospace
    background-color: $color-code-background
    font-size: 85%
    padding: .3rem .2rem
    border-radius: 3px
    margin: 0

  .content img
    max-width: 100%

  #post-header
    margin-bottom: 2rem

    .post-date
      color: grey
      padding-bottom: 5rem
  .post-gallery
    .post-photo
      max-width: 100%

  .post-tag
    margin-top: 2rem
    margin-bottom: 2rem
    a
      color: $color-secondary

  .post-footer
    padding-top: 2rem
    i
      vertical-align: middle
    .fa-arrow-circle-left
      padding-right: 1rem
    .fa-arrow-circle-right
      padding-left: 1rem

  h1
    font-size: 2rem
  h2
    font-size: 1.7rem
  h3
    font-size: 1.5rem
  h4
    font-size: 1.4rem
  h5
    font-size: 1.3rem
  h6
    font-size: 1.2rem

  @media only screen and (min-width: 601px) and (max-width: 771px)
    .container
      width: 540px
  @media only screen and (min-width: 772px) and (max-width: 1000px)
    .container
      width: 70%
  @media only screen and (min-width: 1001px)
    .container
      width: 700px
  .social-share
    margin-top: 2rem

    #share-to
      font-family: "Microsoft YaHei UI", Roboto, "Segoe UI", serif
      font-weight: 300

figure.highlight
  margin: 0

.line
  height: 20px

.gutter pre
  padding-right: 1rem